<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="close"
    width="30%"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="城市" prop="city">
        <el-select
          v-model="dataForm.city"
          placeholder="请选择城市"
          style="width: 300px"
          clearable
        >
          <el-option
            v-for="item in cityList"
            :key="item.value"
            :label="item.cityName"
            :value="item.cityId + ',' + item.cityName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单元" prop="code">
        <el-select
          v-model="dataForm.code"
          placeholder="请选择单元"
          style="width: 300px"
          clearable
        >
          <el-option
            v-for="item in unitList"
            :key="item.value"
            :label="item.desc"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="title">
        <el-input
          v-model="dataForm.title"
          placeholder="请输入备注"
          style="width: 300px"
          clearable
          @input="change($event)"
        ></el-input>
      </el-form-item>
      <el-form-item label="创建人" prop="createUser">
        <el-input
          v-model="dataForm.createUser"
          placeholder="请输入创建人"
          style="width: 300px"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="工号" prop="createUserAcc">
        <el-input
          v-model="dataForm.createUserAcc"
          placeholder="请输入工号"
          style="width: 300px"
          disabled
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button @click="visible = false">取消</el-button> -->
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        paramKey: "",
        paramValue: "",
        remark: "",
        city: "",
        code: "",
        title: "",
        createUser: "",
        createUserAcc: "",
      },
      cityList: [],
      unitList: [],
      dataRule: {
        city: [{ required: true, message: "城市不能为空", trigger: "blur" }],
        code: [{ required: true, message: "单元不能为空", trigger: "blur" }],
        title: [{ required: true, message: "主题不能为空", trigger: "blur" }],
        createUser: [
          { required: true, message: "创建人不能为空", trigger: "blur" },
        ],
        createUserAcc: [
          { required: true, message: "工号不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    //     cityCode: {
    //     get () { return this.$store.state.user.cityId },
    //     set (val) { this.$store.commit('user/updateCityCode', val) }
    //   }
    userName: {
      get() {
        return this.$store.state.user.name;
      },
    },
    staffAccount: {
      get() {
        return this.$store.state.user.staffAccount;
      },
    },
  },
  methods: {
    init(data) {
      console.log("data", data);
      this.dataForm.id = data || 0;
      console.log("this.dataForm.id", this.dataForm.id);
      this.visible = true;
      if (this.dataForm.id === 0) {
        this.dataForm = {};
        this.dataForm.createUser = this.userName;
        this.dataForm.createUserAcc = this.staffAccount;
      } else {
        let obj = JSON.parse(JSON.stringify(data));
        console.log("obj", obj);
        this.dataForm.city = obj.city;
        this.dataForm.code = obj.unitLevel;
        this.dataForm.title = obj.title;
        this.dataForm.createUser = obj.createUser;
        this.dataForm.createUserAcc = obj.createUserAcc;
      }

      // this.$nextTick(() => {
      //   this.$refs['dataForm'].resetFields()
      //   if (this.dataForm.id) {
      //     this.$http({
      //       url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
      //       method: 'get',
      //       params: this.$http.adornParams()
      //     }).then(({data}) => {
      //       if (data && data.code === 0) {
      //         this.dataForm.paramKey = data.config.paramKey
      //         this.dataForm.paramValue = data.config.paramValue
      //         this.dataForm.remark = data.config.remark
      //       }
      //     })
      //   }
      // })
      this.getCityList();
      this.getUnitList();
    },
    // 获取地市数据
    getCityList() {
      this.$http({
        url: this.$http.adornUrl("syscitydata/cityList"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          //   console.log("city", data);
          // this.$store.commit('common/updateCityList', data.list)
          this.cityList = data.list;
        }
      });
    },
    // 级别单元数据
    getUnitList() {
      this.$http({
        url: this.$http.adornUrl("staffGroup/getUnitLevel"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          //   console.log("city", data);
          // this.$store.commit('common/updateCityList', data.list)
          this.unitList = data.data;
        }
      });
    },
    //右上角叉号事件
    close() {
      this.dataForm = {};
      this.$refs.dataForm.clearValidate();
    },
    change(e) {
      this.$forceUpdate();
    },
    // 表单提交
    dataFormSubmit() {
      console.log(this.dataForm);
      console.log("this.dataForm.city", this.dataForm.city);
      if (this.dataForm.city != undefined) {
        console.log(this.dataForm.city.split(",")[0]);
        console.log(this.dataForm.city.split(",")[1]);
      }

      let id = "";
      if (this.dataForm.id === undefined) {
        id = "";
      } else {
        id = this.dataForm.id.id;
      }
      console.log("this.dataForm.id", id);
      // return
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `staffGroup/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: id,
              cityCode: this.dataForm.city.split(",")[0],
              city: this.dataForm.city.split(",")[1],
              unitLevel: this.dataForm.code,
              title: this.dataForm.title,
              createUser: this.dataForm.createUser,
              createUserAcc: this.dataForm.createUserAcc,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
